<!DOCTYPE html>
<html>
<head>
  <title>TransactionList</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <!-- 所有的 css & js 资源 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../../static/sa.css">
  <script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
  <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
  <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
  <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
  <script src="../axios.min.js"></script>
  <script src="../../static/sa.js"></script>
  <style type="text/css">
    /* .data-table .el-table__body-wrapper{min-height: 0px; max-height: 0px;}
    .data-table .el-table__body-wrapper{transition: all 0.3s;} */
  </style>
</head>
<body>
<div class="vue-box" style="display: none;" :style="'display: block;'">
  <div class=c-panel">
<!--    <div>{{dataList.userId}}</div>-->
    <template>
    <el-table class="data-table" ref="data-table" :data="dataList" size="small">
      <el-table-column label="userId" prop="userId"  >
<!--        <template slot-scope="s">-->
<!--          {{s.row.userId}}-->
<!--        </template>-->
      </el-table-column>
      <el-table-column label="name" prop="name"  > </el-table-column>
      <el-table-column label="type" prop="type" ></el-table-column>
      <el-table-column label="balance" prop="balance" ></el-table-column>
    </el-table>
    </template>
  </div>
</div>
<script>
  var mockData = {
    code: 200,
    msg: 'ok',
    data:[
      {
        "userId": 11111111111,
        "balance": 5391.46,
        "type": 1,
        "email": "r.khrdrvbpf@mqpj.kz",
        "password": "fphyuzdegdqi",
        "name": "谢艳",
        "description": "已且温但斯系置层传身最单队克。还重参起很能多较广系回政。上较教严真知八争论二交家数。心持由龙议才取把至属真里民术据形。们达维想亲路选进参常为并斯。",
        "logoPath": "http://speezh.com.cn/nnlb",
        "legalRequest": false,
        "username": "唐敏",
        "tokenName": "广立合克",
        "tokenValue": "incididunt reprehenderit dolore sint proident"
      }
    ]
  }
  var app = new Vue({
    el: '.vue-box',
    data: {
      sa: sa,
      p: { // 查询参数
        id: '',
        title: '',
        sortType: 0,
        pageNo: 1,
        pageSize: 10,
      },
      dataCount: 0,	// 数据总数
      dataList: [] // 数据集合
    },
    methods: {
      // 数据刷新
      f5: function() {
        // TODO: 获取数据
        const url = "http://localhost:8080/api/v1/users/900000000";
        axios.get(url).then(function(response) {
          // console.log(response);
          this.dataList = response.data;
          // console.log(this.dataList);
          sa.f5TableHeight();		// 刷新表格高度
        }.bind(this))
      }
    },
    created: function() {
      this.f5();
      sa.onInputEnter();		// 监听输入框的回车事件，执行查询
    }
  })
</script>
</body>
</html>
